<template>
  <div>
    <van-tabbar route active-color="#ee0a24">
      <van-tabbar-item v-for="(tab,index) in tabs" :key="tab.name" :icon="tab.icon"
                       class="iconfont" icon-prefix="iconfont"
                       :to="tab.path">
        <span>{{ tab.name }}</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Tabber",
  data() {
    return {
      tabs: [
        {
          name: "精选",
          icon: "wangyiyunyinle",
          path: "/home"
        },
        {
          name: "播客",
          icon: "diantai",
          path: "/podcasts"
        },
        {
          name: "我的",
          icon: "yinle",
          path: "/user"
        },
        {
          name: "关注",
          icon: "guanzhu",
          path: "/concern"
        },
        {
          name: "社区",
          icon: "shequ",
          path: "/community"
        }
      ]
    }
  }
}
</script>

<style scoped>
.iconfont {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
}


</style>
